<template>
  <view class="app-container ver-layout">
    <view class="input-box">
      <view class="input-title">登录账号</view>
      <input class="input-text" placeholder="请输入登录账号">
    </view>
    <view class="input-box yzm">
      <view class="input-title">验证码</view>
      <view class="hor-layout-side-center" style="margin-top: 35rpx">
        <input class="input-text" style="margin-top: 0px;" placeholder="请输入验证码">
        <view class="get-yzm-btn">获取验证码</view>
      </view>
    </view>
    <view class="input-box">
      <view class="input-title">新的密码</view>
      <input class="input-text" placeholder="请输入新密码">
    </view>
    <view class="input-box">
      <view class="input-title">确认密码</view>
      <input class="input-text" placeholder="请再次输入密码">
    </view>
    <view class="confirm-btn">确认</view>
  </view>
</template>

<script>
export default {
  name: "findPassword"
}
</script>

<style scoped lang="scss">
.input-box {
  padding-top: 48rpx;
  padding-bottom: 36rpx;
  border-bottom: 1px solid #E5E5E5;

  .input-title {
    font-size: 28rpx;
    color: #000000;
  }

  .input-text {
    margin-top: 36rpx;
    font-size: 28rpx;
    color: #999999;
  }

  .get-yzm-btn {
    border: 1px solid #42B4AB;
    border-radius: 6rpx;
    font-size: 24rpx;
    color: #42B4AB;
    padding: 16rpx 14rpx;
  }
}

.input-box.yzm {
  padding-bottom: 28rpx;
}

.confirm-btn {
  margin-top: 100rpx;
  font-size: 34rpx;
  color: white;
  background: #42B4AB;
  border-radius: 10rpx;
  padding: 20rpx;
  text-align: center;
}
</style>
